{% extends base_template %}

{% load seahub_tags i18n %}
{% load url from future %}

{% block main_panel %}
    <h2>{{ dir_name }}</h2>
    <p>{% trans "Shared by: " %}{{ username|email2nickname }}</p>
    <div class="repo-file-list-outer-container">
        <div class="repo-file-list-inner-container">
            <div class="repo-file-list-topbar ovhd">
                <p class="path fleft">
                {% trans "Current path: "%} 
                {% for name, link in zipped %}
                {% if not forloop.last %}
                <a href="{{ SITE_ROOT }}d/{{ token }}/?p={{ link|urlencode }}">{{ name }}</a> /               
                {% else %}
                {{ name }}
                {% endif %}
                {% endfor %}
                </p>
                {% if not traffic_over_limit %}
                <a href="{% url 'repo_download_dir' repo.id %}?p={{ path|urlencode }}&t={{ token }}" class="obv-btn fright">{% trans "ZIP"%}</a>
                {% endif %}
            </div>
            <table class="repo-file-list">
                <tr>
                    <th width="5%"></th>
                    <th width="55%">{% trans "Name"%}</th>
                    <th width="20%">{% trans "Size"%}</th>
                    <th width="20%">{% trans "Operations"%}</th>
                </tr>

                {% for dirent in dir_list %}
                <tr>
                    <td class="alc"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
                    <td>
                        <a href="{{ SITE_ROOT }}d/{{ token }}/?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                    </td>

                    <td></td>
                    <td>
                      {% if not traffic_over_limit %}
                      <a class="op-icon vh" href="{% url 'repo_download_dir' repo.id %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&t={{token}}" title="{% trans 'Download' %}">
                          <img src="{{MEDIA_URL}}img/download.png" alt="" />
                      </a>
                      {% endif %}
                    </td>
                </tr>
                {% endfor %}

                {% for dirent in file_list %}
                <tr>
                    <td class="alc"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                    <td>
                        <a class="normal" href="{{ SITE_ROOT }}d/{{ token }}/files/?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.props.obj_name }}</a>
                    </td>

                    <td>{{ dirent.file_size|filesizeformat }}</td>
                    <td>
                      {% if not traffic_over_limit %}
                      <a class="op-icon vh" href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/{{ dirent.props.obj_id }}/?file_name={{ dirent.props.obj_name }}&op=download&t={{token}}" title="{% trans "Download"%}">
                          <img src="{{MEDIA_URL}}img/download.png" alt="" />
                      </a>
                      {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$(function() {
    {% if traffic_over_limit %}
    var tip = "{% trans "File download is disabled: the share link traffic of owner is used up." %}";
    $('#title-panel').html('<p class="alc" style="background:#fddaa4;color:#1f0600;padding:3px 0;margin:0 0 15px;">' + tip + '</p>').removeClass('hide');
    {% endif %}
});
</script>
{% endblock %}
